<!-- fireWork.vue - 烟花 -->
<template>
    <div class="container">
        <canvas ref='sky-canvas' ></canvas><!--  @mousemove.stop='mousemoveHandle($event)' @mouseleave.stop='mouseleaveHandle($event)' -->

    </div>
</template>
<style scoped>
    .container{

    }
</style>
<script>
    import utils from '@/utils/utils.js' ;

    export default {
        
        data(){
            return {
                canvas:null , // canvas元素
                width:800 , // canvas宽度
                height:600 , // canvas高度
                background:'#333', // canvas的背景色
                ctx:null , // canvas的绘制上下文
                focusDistans:700 , // 焦点距离（透视关系中的灭点）
                sky:{ // 天空的配置，背景

                },
                g:.2, // 重力加速度 
            }
        },
        methods:{
            init(){ // 初始化canvas状态
                this.canvas = this.$refs['sky-canvas'] ;
                this.canvas.width = this.width ;
                this.canvas.height = this.height ;
                this.canvas.style.background = this.background ;
                if(this.canvas.getContext){
                    this.ctx = this.canvas.getContext('2d') ;
                }else{
                    this.$message('您的浏览器不支持canvas绘画环境');
                }
            },
        },
        mounted(){
            this.init() ;
        }
    }
</script>